<template>
  <view class="static" >
	 
   <u-tabs-swiper
      ref="tabs"
      :list="list"
      active-color="#4dbf92"
      inactive-color=""
      :is-scroll="false"
      :current="current"
      @change="tabsChange"
    ></u-tabs-swiper>
    
    <view  style="height: 2rem;" class="hrhrhr" >
    </view>
    <view class="componentsP"  v-for="(item, index) in comList" :key="index" >
       <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
              <component  v-if="index==current"  :ref="item"  v-bind:is="item" ></component>
        </scroll-view>
    </view>

    <!-- <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        :style="{ height: '' }"
        v-for="(item, index) in comList"
        :key="index"
      >
      改动
        <!-- <u-loading mode="circle"></u-loading> -->
        <!-- <component v-if="index==current" v-bind:is="item"></component> -->

        <!-- <component  v-if="index==current"   v-bind:is="item" ></component>  -->

        <!-- <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
         
        </scroll-view>
      </swiper-item>
    </swiper> -->

    <!-- <bar></bar> -->
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import uTabsSwiper from "@/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue";

import bar from "../home/topbar.vue";

//  import  Swiper  from '@/uview-ui/components/u-swiper/u-swiper'

import SwiperItem from "../../uview-ui/components/u-swiper/u-swiper.vue";

import TotalDataZ from "./totalDataZ.vue"; //1
import Income from "./income.vue"; //2 
import Buniness from "./business.vue"; //3   交易
import Firm from "./firm.vue";  // 4  商户
import Agency from "./agency.vue"; //5 代理

import {AppModule} from '../../store/modules/app';
@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    bar,
    TotalDataZ,
    Income,
    Buniness,
    Firm,
	Agency
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public list = [
    {
      name: "总数据",
    },
    {
      name: "收益",
    },
    {
      name: "交易",
    },
    {
      name: "商户",
    },
    {
      name: "代理",
    }
  ];
  public comList = ["TotalDataZ", "Income", "Buniness", "Firm","Agency"];
    // public comList = ["Firm", "TotalDataZ", "Buniness", "Firm"];

  public current = 0; // tabs组件的current值，表示当前活动的tab选项

  public swiperCurrent = 0;

  created() {
      // console.log(this.$refs.scrollView,'123',)

      uni.showLoading({  
       title: '加载资源中'   
                    })

  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

    //  uni.setStorage({
    //     key: "staticCurrent",
    //     data: 0,
    //     success: function () {
    //     },
    //   });
      // this.current=uni.getStorageSync("staticCurrent")

  }

  onLoad(){

  }
  onHide(){
	  uni.hideLoading();
  }

  tabsChange(index: any) {

    console.log(index,'909090909090');
    this.current = index;
    this.swiperCurrent = index;

    AppModule.selectModuleBarAction(this.current)

  }
   transition(data:any) {
    //  console.log('transition',data)
  }
  animationfinish(data:any) {  //只要刷新就触动

    console.log(data.target.current, "data11111");
    this.current = data.target.current;

    AppModule.selectModuleBarAction(this.current)

  }

   onPullDownRefresh() {

    console.log("refresh---index");

    // console.log((  this.$refs.TotalDataZ as any ).childM  )

    //  this.$refs.child[0].childM()

    //  this.$refs.child.$emit("childmethod")     //第二种方法

    setTimeout(function () {

      uni.switchTab({
        url: "./index",
      });
      
      uni.stopPullDownRefresh();

    }, 1000);
    
  }
  // scroll-view到底部加载更多
  onreachBottom() {}
}
</script>

<style scoped> 
/* lang='scss' .static .u-tabs {   改动 */

.static .u-tabs {
 z-index: 1;
 background: rgb(255, 255, 255) none repeat scroll 0% 0%;
 background-color: red;
 position: fixed;
 top: 0;
}


.componentsP{
/* margin-top: 2.1rem; */
}




</style>